import React, { Component } from 'react';
import { Empty, Tooltip } from 'antd';
import { WingBlank, WhiteSpace, Flex } from 'antd-mobile';
import moment from 'moment';
import _ from 'lodash';
import { BaseTable, utils } from '@/components/BaseTable';

const company = '(万元：合计/房源/车位)';
export default class MonthTarget extends Component {
  state = {};

  buildTitleTree = () => {
    const titleTree = [];
    const { year } = this.props;
    for (let i = 1; i <= 12; i += 1) {
      let month;
      if (i < 10) {
        month = `0${i}`;
      } else {
        month = i;
      }
      const isAfter = moment(`${year}-${month}`).isAfter(moment().format('YYYY-MM'));
      titleTree.push({
        name: `${year}-${month}${isAfter ? '(无实际)' : ''}`,
        key: i,
        rowspan: 1,
        children: [
          {
            name: `${year}-${month}月初存货`,
            key: `${year}-${month}月初存货`,
            colspan: 1 * 5,
            children: this.stockChildren(isAfter, month),
          },
          {
            name: `${year}-${month}月度新供`,
            key: `${year}-${month}月度新供`,
            colspan: 1 * 7,
            children: this.newSupplyChildren(isAfter, month),
          },
          {
            name: `${year}-${month}月度综合`,
            key: `${year}-${month}月度综合`,
            colspan: 1 * 5,
            children: this.comprehensiveChildren(isAfter, month),
          },
        ],
      });
    }
    return titleTree;
  };

  /* 生成每列view is data */
  buildColumns = titleTree => {
    const columns = [];
    _.forEach(titleTree, item => {
      _.forEach(item.children, x => {
        _.forEach(x.children, v => {
          columns.push({
            key: `${v.key}`,
            title: _.indexOf(v.name, '率') > -1 ? '%' : company,
            width: _.indexOf(v.name, '率') > -1 ? 70 : 170,
            align: 'right',
            dataGetter: ({ rowData }) => {
              const arr = _.filter(
                rowData.yearEarlyBottomList,
                value => value.name * 1 === item.key,
              );
              const text = arr.length > 0 ? arr[0][v.key.substring(2, v.key.length)] : '';
              return text;
            },
            cellRenderer: ({ rowData }) => {
              const arr = _.filter(
                rowData.yearEarlyBottomList,
                value => value.name * 1 === item.key,
              );
              const text = arr.length > 0 ? arr[0][v.key.substring(2, v.key.length)] : '';
              // return <div style={{ width: '100%', textAlign: 'right' }}>{text}</div>;
              return (
                <Tooltip placement="topLeft" title={text}>
                  <div
                    style={{
                      width: '100%',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                      overflow: 'hidden',
                      textAlign: 'right',
                    }}
                  >
                    {text}
                  </div>
                </Tooltip>
              );
            },
          });
        });
      });
    });
    return columns;
  };

  stockChildren = (isAfter, month) => {
    const stock = [
      {
        name: '月初存货',
        key: `${month}f_monthlyInventoryAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}f_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约实际',
        key: `${month}f_signingActualAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约达成率',
        key: `${month}f_signingRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}f_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    const noStock = [
      {
        name: '月初存货',
        key: `${month}f_monthlyInventoryAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}f_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}f_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    return isAfter ? noStock : stock;
  };

  newSupplyChildren = (isAfter, month) => {
    const newSupply = [
      {
        name: '供货计划',
        key: `${month}g_supplyPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '供货实际',
        key: `${month}g_supplyPlanActualAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '供货达成率',
        key: `${month}g_supplyPlanRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}g_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约实际',
        key: `${month}g_signingActualAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约达成率',
        key: `${month}g_signingRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}g_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    const noNewSupply = [
      {
        name: '供货计划',
        key: `${month}g_supplyPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}g_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}g_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    return isAfter ? noNewSupply : newSupply;
  };

  comprehensiveChildren = (isAfter, month) => {
    const comprehensive = [
      {
        name: '月度可售',
        key: `${month}h_monthlyAvailableAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}h_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约实际',
        key: `${month}h_signingActualAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约达成率',
        key: `${month}h_signingRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}h_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    const noComprehensive = [
      {
        name: '月度可售',
        key: `${month}h_monthlyAvailableAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}h_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}h_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    return isAfter ? noComprehensive : comprehensive;
  };

  render() {
    const { yearEarlyBottomList } = this.props;
    const titleTree = this.buildTitleTree();
    const columns = this.buildColumns(titleTree);
    const dataSource = [
      {
        id: '1',
        yearEarlyBottomList,
      },
    ];
    const headerRenderer = utils.getHeaderRenderer(titleTree, 3);
    return (
      <div id="MonthTarget" className="MonthTarget">
        <WingBlank>
          <Flex justify="between">
            <span className="sub-title">全盘月度指标</span>
          </Flex>
          {yearEarlyBottomList && Object.keys(yearEarlyBottomList).length > 0 ? (
            <BaseTable
              expandColumnKey="name"
              fixHeight={163}
              columns={columns}
              headerHeight={[30, 30, 30, 30]}
              headerRenderer={headerRenderer}
              treeData={dataSource}
            />
          ) : (
            <div>
              <WhiteSpace />
              <div className="xh-month-target-card">
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              </div>
            </div>
          )}
          <WhiteSpace />
        </WingBlank>
      </div>
    );
  }
}
